import React from 'react'
import commentItemStyles from './styles/commentItemStyles' // 第三次封装

// 第一次封装
const commentItemCss = {border:'1px dashed #ccc', margin:'10px', padding:'10px', boxShadow:'0 0 10px #ccc'}
const commentUserCss = {fontSize:'16px'}
const commentContentCss = {fontSize:'12px'}

// 第二次封装
// const commentItemStyles = {
//     item:{border:'1px dashed #ccc', margin:'10px', padding:'10px', boxShadow:'0 0 10px #ccc'},
//     user:{fontSize:'16px'},
//     content:{fontSize:'12px'}
// }


// 评论item项定义为普通的无状态子组件
function CommentItem(props){
    return <div style={commentItemStyles.item}>
               <h3 style={commentItemStyles.user}>评论人：{props.userName}</h3>
               <p style={commentItemStyles.content}>评论内容：{props.content}</p>
           </div>
}

export default class CommentList extends React.Component{

    constructor(){
        super()
        this.state={
            commentsList:[{
                "id":1,"userName":"xiaobai","content":"test"
            },{
                "id":2,"userName":"xiaoming","content":"今天好天气"
            },{
                "id":3,"userName":"xiaoming","content":"好地方"
            },{
                "id":4,"userName":"xiaoming","content":"好人呢"
            },{
                "id":5,"userName":"xiaoming","content":"好失败"
            },{
                "id":6,"userName":"xiaoming","content":"好水"
            }]
        }
    }

    render(){
        return <div>
            <h1>评论列表</h1>
             {this.state.commentsList.map(item =>{
                return <CommentItem {...item} key={item.id}></CommentItem>
             })}
        </div>
    }

}